<#escape x as x?html>
<!DOCTYPE html>
<html>
    <@y.htmlHead type="login"></@>
<body>
<div class="main">
    <!--header-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-3 col-lg-2"><img src="${assetsPath}/img/demo/logo.png"/></div>
        <div class="col-md-4 col-lg-3" style="padding-top: 10px;">
            <div class="btn-group" style="float: left;color: #999999;min-width: 150px;">
                <select id="roleSelect" class="form-control select2"
                        data-url="${contextPath}/sys/applicationCategory/rest/findAll"
                        data-value="${(record.categoryId)!}"
                        data-key="id"
                        name="categoryId" data-placeholder="搜索应用">
                </select>
            </div>
            <div class="input-group">
                <input type="text" id="appSearch" class="form-control"
                       style="background-color:white;border-left: none;border-right: none;"/>
                <span class="input-group-addon"
                      style="background-color: #49A6DB;cursor:pointer;"
                      id="searchBtn">
                    <i class="glyphicon glyphicon-search" style="color:white;"></i></span>
            </div>
        </div>
        <div class="col-md-5 col-lg-5" style="padding-top: 10px;">
            <#if isLogin>
                <div class="pull-right" style="margin-top: 5px;">
                    <span style="color: #337AC4;margin-right: 10px;">${userName!''}</span>
                    <button type="button" class="btn btn-link pull-right"
                            style="outline: none;font-size: 14px;color: black;margin-top: -6px;"
                            onclick="window.location.href='/logout'">
                        登出
                    </button>
                </div>
            <#else>
                <button type="button" class="btn btn-link pull-right"
                        style="font-size: 14px;color: black;padding-right: 0px;"
                        onclick="window.location.href='/login'">登录
                </button>
            </#if>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--第二行tab选项卡-->
    <div class="row" style="margin: 5px;background-color: #466eb7">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-6 col-lg-4">
            <ul class="nav navbar-nav" style="margin-left: -5px;">
                <li style="background-color: #49A6DB">
                    <a href="/app" style="color:white;font-size: 18px;">首页</a>
                </li>
                <li style="<#if !isLogin>display:none</#if>">
                    <a href="/myApp/index" style="color:white;font-size: 18px;">我的应用</a>
                </li>
                <li style="<#if !isLogin>display:none</#if>">
                    <a href="/myApp/favoriteIndex" style="color:white;font-size: 18px;">我的收藏</a>
                </li>

            </ul>
        </div>
        <div class="col-md-6 col-lg-7"></div>
    </div>
    <!--应用分类-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-9 col-lg-8" style="margin-right: 10px;">
            <input id="appId" value="${app.id!''}" hidden>
            <!-- 面包屑 -->
            <p style="margin-top: 20px;margin-left: 12px;"><a href="/app" style="font-size: 16px;color: #999;">首页</a>&nbsp;&nbsp;>&nbsp;&nbsp;
                <a href="/app/classify?id=${app.categoryId}" style="font-size: 16px;color: #999;">${app.category!''}</a>
                &nbsp;&nbsp;>&nbsp;&nbsp;<span style="font-size: 16px;color: #49A6DB;">${app.name!''}</span></p>
            <!-- 应用信息 -->
            <div class="row">
                <div class="col-md-1 col-lg-1" style="min-width: 90px;padding-left: 0px;">
                    <span class="info-box-icon" style="background-color: transparent;"><img
                            src="/resource/app/${app.pic!'app_default.png'}"
                            style="margin-top: -10px;border-radius: 0;margin-left: 10px;"
                            alt="User Image"></span>
                </div>
                <div class="col-md-7 col-lg-5" style="padding-left: 0px;">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                                <span class="info-box-text"
                                      style="font-weight:bold;text-align: left;font-size: 20px;float:left;max-width: 350px;cursor:default;"
                                      title="${app.name!''}">${app.name!''}</span>
                                <img class="favorite"
                                     src="${assetsPath}/img/demo/<#if app.favorite>favorite.png<#else>nonfavorite.png</#if>"
                                     style="border-radius: 0;margin-left: 50px;<#if !isLogin>display: none;</#if>"
                                     alt="User Image" title="<#if app.favorite>取消收藏<#else>点击收藏</#if>"
                                     value="${app.favorite?string('true','false')}">&nbsp;&nbsp;</img>
                                <span style="font-size: 16px;vertical-align: bottom;<#if !isLogin>display: none;</#if>"
                                      id="favoriteTip"><#if app.favorite>已收藏<#else>收藏</#if></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                               <span class="info-box-text"
                                     style="font-size: 12px;color:#999999;text-align: left;">
                                 <input class="rating-input-xs" value="${app.star!''}" type="number" style="float:left">
                                <span style="font-size: 14px;margin-top: 3px;margin-left: 150px;"
                                      class="users-list-date">(&nbsp;&nbsp;<i
                                        class="fa fa-rss text-primary" reset
                                        title="订阅"></i>&nbsp;${app.subscribeCount!''}次订阅&nbsp;&nbsp;)</span>
                            </span>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                                <p style="font-size: 14px;color:#999999;margin-bottom: 0px;">
                                    <span>发布日期：${app.publishTime!''}</span>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                            </td>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                                <p style="font-size: 14px;color:#999999;margin-bottom: 0px;">
                                    <span>业务拥有者：${app.bizOwner!''}</p>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-bottom: 0px;padding-top: 0px;border: 0px;">
                                <p style="font-size: 14px;color:#999999;margin-bottom: 0px;"><span>标签：
                                    <#list app.tags as tag>
                                        <a class="btn btn-default"
                                           style="outline: none;margin-right: 10px;font-size: 12px;"
                                           href="/app/classify?tag=${tag!''}">${tag!''}</a>
                                    </#list>
                                </p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-6 hidden-md-fusion">
                    <a href="#" id="subscribeBtnlg"
                       style="margin-top: 30px;width: 200px;height: 70px;<#if !isLogin>display: none;</#if>;disabled:disabled;"
                       tabindex="0"
                       class="btn btn-lg btn-success <#if isLogin><#if app.subscribeState=='APPLYING'>disabled</#if></#if>"
                       role="button" data-html="true"
                       data-toggle="popover" data-placement="bottom" data-trigger="click">
                        <i class="fa fa-rss" reset="" title="订阅" style="margin-top: 18px;"></i><span
                            style="font-size:24px;"><#if isLogin><#if app.subscribeState=='SUCCESS'>
                        已订阅<#elseif app.subscribeState=='APPLYING'>订阅申请中 <#else>订阅</#if></#if></span></a>


    <#if isLogin><#if app.subscribeState=='SUCCESS'>
                    <button type="button" id="openAppBtn" class="btn btn-default"
                            style="outline: none;margin-left:35px;margin-top:30px;width: 200px;height: 70px;font-size: 18px;<#if !isLogin>display: none;</#if>">
                        <i class="fa fa-hand-pointer-o" reset=""
                           title="打开"></i>打开
                    </button>
    </#if></#if>
                </div>
                <div class="col-md-3 hidden-lg-fusion">
                    <a href="#" id="subscribeBtn"
                       style="margin-top: 30px;width: 150px;height: 55px;<#if !isLogin>display: none;</#if>;disabled:disabled;"
                       tabindex="0"
                       class="btn btn-lg btn-success <#if isLogin><#if app.subscribeState=='APPLYING'>disabled</#if></#if>"
                       role="button" data-html="true"
                       data-toggle="popover" data-placement="bottom" data-trigger="click">
                        <i class="fa fa-rss" reset="" title="订阅" style="margin-top: 10px;"></i>
                        <span style="font-size:18px;"><#if isLogin><#if app.subscribeState=='SUCCESS'>
                            已订阅<#elseif app.subscribeState=='APPLYING'>订阅申请中 <#else>订阅</#if></#if></span></a>


    <#if isLogin><#if app.subscribeState=='SUCCESS'>
                    <a type="button" id="openAppBtnlg" class="btn btn-default"
                       style="margin-top:20px;width: 150px;height: 55px;font-size: 18px;<#if !isLogin>display: none;</#if>">
                        <i class="fa fa-hand-pointer-o" reset="" title="打开" style="margin-top: 10px;"></i>
                        <span style="font-size:20px;">打开</span>
                    </a>
    </#if></#if>

                </div>
            </div>
            <!-- 应用截图 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;">
                        <img src="${assetsPath}/img/demo/app-info-prefix.png"
                             style="margin-top: -10px;border-radius: 0;margin-top: -5px;" alt="User Image">&nbsp;应用截图
                    </th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!-- 轮播 -->
            <div id="ca-container" class="ca-container hidden-md-fusion" style="background-color:">
                <div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>
                <div class="ca-wrapper" style="overflow: hidden;">
                    <#list app.screenshots as pic>
                        <div class="ca-item" style="border: 1px solid #ccc; margin-right: 2px">
                            <image src="/resource/app/${pic}">
                        </div>
                    </#list>
                </div>
            </div>
            <div id="ca-container-md" class="ca-container hidden-lg-fusion" style="background-color: white;width: 658px;">
                <div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>
                <div class="ca-wrapper" style="overflow: hidden;">
                    <#list app.screenshots as pic>
                        <div class="ca-item" style="border: 1px solid #ccc; margin-right: 2px">
                            <image src="/resource/app/${pic}">
                        </div>
                    </#list>
                </div>
            </div>

            <!-- 应用介绍 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;">
                        <img src="${assetsPath}/img/demo/app-info-prefix.png"
                             style="margin-top: -10px;border-radius: 0;margin-top: -5px;" alt="User Image">&nbsp;应用介绍
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <p id="product-description" data-f-expanded="true"
                           class="m-product-detail-description max-height-override oneui-override srv_description"
                           itemprop="description" style="white-space: pre-line;margin-left: 20px;">${app.desc!''}
                        </p>
                    </td>
                </tr>
                </tbody>
            </table>
            <!-- 版本特性 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #707070;border-bottom: 1px solid #dadada;">
                        <img src="${assetsPath}/img/demo/app-info-prefix.png"
                             style="margin-top: -10px;border-radius: 0;margin-top: -5px;" alt="User Image">&nbsp;版本特性
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <p id="product-description" data-f-expanded="true"
                           class="m-product-detail-description max-height-override oneui-override srv_description"
                           itemprop="description"
                           style="white-space: pre-line;margin-left: 10px;">${app.versionFeature!''}</p>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="commentList"></div>
            <!-- 相关应用 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #289c2e;border-bottom: 2px solid #289c2e;">
                        相关应用
                    </th>
                </tr>
                </thead>
            </table>
            <div class="row">
                <#if (relatedApps??)&&(relatedApps?size>0)>
                    <#list relatedApps as relatedApp>
                        <a href="/app/detail?id=${relatedApp.id!''}">
                            <div class="col-lg-3 hidden-md-fusion">
                                <div class="info-box"
                                     style="background-color: transparent;box-shadow: none;margin-bottom: 0px;">
                        <span class="info-box-icon" style="background-color: transparent;margin-left: 20px;"><img
                                src="/resource/app/${relatedApp.pic!''}"
                                style="margin-top: -10px;border-radius: 0;"
                                alt="User Image"></span>
                                    <div class="info-box-content" style="padding-top: 12px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;text-align: left;">${relatedApp.name!''}</span>
                                        <span class="info-box-text"
                                              style="font-size: 12px;color:#999999;text-align: left;margin-top: 32px;"><i
                                                class="fa fa-rss text-primary" reset
                                                title="订阅"></i>&nbsp;${relatedApp.subscribeCount!''}次订阅</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 hidden-lg-fusion">
                                <div class="info-box"
                                     style="background-color: transparent;box-shadow: none;margin-bottom: 0px;">
                        <span class="info-box-icon" style="background-color: transparent;margin-left: 5px;"><img
                                src="/resource/app/${relatedApp.pic!''}"
                                style="margin-top: -10px;border-radius: 0;"
                                alt="User Image"></span>
                                    <div class="info-box-content" style="padding-top: 12px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;text-align: left;">${relatedApp.name!''}</span>
                                        <span class="info-box-text"
                                              style="font-size: 12px;color:#999999;text-align: left;margin-top: 32px;"><i
                                                class="fa fa-rss text-primary" reset
                                                title="订阅"></i>&nbsp;${relatedApp.subscribeCount!''}次订阅</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </#list>
                </#if>
            </div>
        </div>
        <div class="col-lg-2 hidden-md-fusion" style="padding-left: 0px;">
            <table class="table" style="margin-bottom: 0px;">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用推荐</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
            </table>
            <ul class="users-list clearfix hot">
                <#if (recommendApps??)&&(recommendApps?size>0)>
                    <#list recommendApps as recommendApp>
                        <li style="width: 100%;padding:0px;" appId="${recommendApp.id!''}">
                            <div class="info-box"
                                 style="background-color: transparent;box-shadow: none;margin-bottom: 0px;">
                        <span class="info-box-icon" style="background-color: transparent;"><img
                                src="/resource/app/${recommendApp.pic!'app_default.png'}" style="margin-top: -10px;border-radius: 0;"
                                alt="User Image"></span>
                                <div class="info-box-content" style="padding-top: 12px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;text-align: left;">${recommendApp.name!''}</span>
                                    <span class="info-box-text"
                                          style="font-size: 12px;color:#999999;text-align: left;margin-top: 32px;"><i
                                            class="fa fa-rss text-primary" reset
                                            title="订阅"></i>&nbsp;${recommendApp.subscribeCount!''}次订阅</span>
                                </div>
                            </div>
                        </li>
                    </#list></#if>
            </ul>
            <table class="table">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用排行</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
                <tbody>
                    <#if (top10??)&&(top10?size>0)>
                        <#list top10 as top10app>
                        <tr id="${top10app.id!''}_lg" class="sumary" appId="${top10app.id!''}">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;<#if top10app_index<3>color: #eb853a;</#if> padding-bottom: 0px;font-size: 16px;">
                            ${top10app_index+1}
                            </td>
                            <td style="border-top: none;padding-bottom: 0px;font-size: 16px;<#if top10app_index<3>color: #eb853a;</#if>">${top10app.name!''}</td>
                        </tr>
                        <tr id="${top10app.id!''}_lg_detail" style="display: none">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;"></td>
                            <td style="border: 0px none;">
                                <img src="/resource/app/${top10app.pic!'app_default.png'}"
                                                               style="margin-top: 5px;border-radius: 0;margin-right: 20px;float: left;"
                                                               alt="User Image">
                                <p style="font-weight: bold;line-height: 20px;margin: 2px;">${top10app.name!''}</p>

                                <p style="line-height: 20px;margin-top: 8px;margin-bottom: 0px;"><i
                                        class="fa fa-rss text-primary" reset
                                        title="订阅"></i>&nbsp;${top10app.subscribeCount!''}次订阅
                                </p>
                                <input class="rating-input-small" value="${top10app.star!''}" type="number">
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>
        </div>
        <div class="col-md-3 hidden-lg-fusion" style="padding-left: 0px;max-width: 240px;">
            <table class="table" style="margin-bottom: 0px;">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用推荐</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
            </table>
            <ul class="users-list clearfix hot">
                <#if (recommendApps??)&&(recommendApps?size>0)>
                    <#list recommendApps as recommendApp>
                        <li style="width: 100%;padding:0px;" appId="${recommendApp.id!''}">
                            <div class="info-box"
                                 style="background-color: transparent;box-shadow: none;margin-bottom: 0px;">
                        <span class="info-box-icon" style="background-color: transparent;"><img
                                src="/resource/app/${recommendApp.pic!''}" style="margin-top: -10px;border-radius: 0;"
                                alt="User Image"></span>
                                <div class="info-box-content" style="padding-top: 12px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;text-align: left;">${recommendApp.name!''}</span>
                                    <span class="info-box-text"
                                          style="font-size: 12px;color:#999999;text-align: left;margin-top: 32px;"><i
                                            class="fa fa-rss text-primary" reset
                                            title="订阅"></i>&nbsp;${recommendApp.subscribeCount!''}次订阅</span>
                                </div>
                            </div>
                        </li>
                    </#list></#if>
            </ul>
            <table class="table">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用排行</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
                <tbody>
                    <#if (top10??)&&(top10?size>0)>
                        <#list top10 as top10app>
                        <tr id="${top10app.id!''}_md" class="sumary"  appId="${top10app.id!''}">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;<#if top10app_index<3>color: #eb853a;</#if> padding-bottom: 0px;font-size: 16px;">
                            ${top10app_index+1}
                            </td>
                            <td style="border-top: none;padding-bottom: 0px;font-size: 16px;<#if top10app_index<3>color: #eb853a;</#if>">${top10app.name!''}</td>
                        </tr>
                        <tr id="${top10app.id!''}_md_detail" style="display: none">
                            <td style="border: 0px none;" colspan="2"><img src="/resource/app/${top10app.pic!''}"
                                                               style="margin-top: 5px;border-radius: 0;margin-right: 20px;float: left;"
                                                               alt="User Image">
                                <p style="font-weight: bold;line-height: 20px;margin: 2px;">${top10app.name!''}</p>
                                <p style="line-height: 20px;margin-top: 8px;margin-bottom: 0px;"><i
                                        class="fa fa-rss text-primary" reset
                                        title="订阅"></i>&nbsp;${top10app.subscribeCount!''}次订阅
                                </p>
                                <input class="rating-input-small" value="${top10app.star!''}" type="number">
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--footer-->
    <div class="row" style="margin-bottom: 25px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-12 hidden-lg-fusion">
            <@y.apphtmlCopyright4Short></@>
        </div>
        <div class="col-lg-10 hidden-md-fusion">
            <@y.apphtmlCopyright></@>
        </div>
        <div class="col-md-0 col-lg-1">
        </div>
    </div>
</body>
<style>
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: white;
        background-color: #31579c;
    }
    .popover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1060;
        display: none;
        max-width: 2000px;
        padding: 1px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: left;
        text-align: start;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        white-space: normal;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #dadada;
        border-radius: 0px !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        line-break: auto;
    }
</style>
<script>
    context.call([
        "core",
        "list",
        "jQuery",
        "carousel",
        "popover",
        "jQueryFancyTree",
        "scanSelect",
        "starRating"
    ], function (core, list, jQuery, carousel, popover, jQueryFancyTree, scanSelect, starRating) {
        scanSelect.initSelect();
        //加载评论
        $("#commentList").load("/app/comment/list/" + $("#appId").val());

        $('#ca-container').contentcarousel();
        $('#ca-container-md').contentcarousel();
        $('.rating-input-xs').rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'xs',
            displayOnly: true
        });
        $('.rating-input-small').rating({
            min: 0,
            max: 5,
            step: 1,
            size: 'xxs',
            displayOnly: true
        });
        $('.rating-container').css("width", "180px").css("float", "left");

        function search() {
            var classifyId = $("#roleSelect option:selected").val();
            var appName = $("#appSearch").val();
            location.href = "/app/classify?id=" + classifyId + "&appName=" + appName;
        }

        $('#searchBtn').click(function () {
            search();
        });
        $("#openAppBtn").click(function () {
            $.ajax({
                url: "/console/app/rest/appUrl/" + $("#appId").val(),
                success: function (url) {
                    window.open(url);
                }
            });
        });
        $("#openAppBtnlg").click(function () {
            $.ajax({
                url: "/console/app/rest/appUrl/" + $("#appId").val(),
                success: function (url) {
                    window.open(url);
                }
            });
        });

        $('#appSearch').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                search();
            }
        });

        var dataNodeContent = "";
        <#if (app.dataNodeStatuses??)&&(app.dataNodeStatuses?size>0)>
            var lastIndex;
            <#list app.dataNodeStatuses as status>
                if ((${status_index} % 4)==
                0
                )
                {
                    dataNodeContent = dataNodeContent + ['<tr>                                <td style="text-align: center;border-top: 0px none;padding-top: 20px;">                                    <button type="button" class="btn btn-default dataNode" state="${status.state!''}" value="${status.id!''}" _selected="false" style="background-color: #c2c2c2;width: 150px;"><#if status.state=='ALLOW'><i class="fa fa-check-circle" reset="" style=";color: green;margin-right:3px;"></i><#elseif status.state=='WAITING'><i class="fa  fa-clock-o" reset="" style=";color: #466EB7;margin-right:3px;"></i></#if>${status.name!''}</button>                                </td>'].join("");
                }
                else
                if ((${status_index} % 4)==
                3
                )
                {
                    dataNodeContent = dataNodeContent + ['<td style="text-align: center;border-top: 0px none;padding-top: 20px;">                                    <button type="button" class="btn btn-default dataNode" state="${status.state!''}" value="${status.id!''}" _selected="false" style="background-color: #c2c2c2;width: 150px;"><#if status.state=='ALLOW'><i class="fa fa-check-circle" reset="" style=";color: green;margin-right:3px;"></i><#elseif status.state=='WAITING'><i class="fa  fa-clock-o" reset="" style=";color: #466EB7;margin-right:3px;"></i></#if>${status.name!''}</button>                                </td>                      </tr>'].join("");
                }
                else
                {
                    dataNodeContent = dataNodeContent + ['<td style="text-align: center;border-top: 0px none;padding-top: 20px;">                                    <button type="button" class="btn btn-default dataNode" state="${status.state!''}" value="${status.id!''}" _selected="false" style="background-color: #c2c2c2;width: 150px;"><#if status.state=='ALLOW'><i class="fa fa-check-circle" reset="" style=";color: green;margin-right:3px;"></i><#elseif status.state=='WAITING'><i class="fa  fa-clock-o" reset="" style=";color: #466EB7;margin-right:3px;"></i></#if>${status.name!''}</button>                                </td>                      '].join("");
                }
            </#list>
        </#if>

        var contentMd = ['<div style="overflow-y: hidden; overflow-x: hidden; max-height: 400px;width: 700px;">',
            '<div class="form-group" style="margin-top:20px;">',
            '<label for="description"',
            'class="col-sm-1 control-label " style="min-width: 90px;">数据节点:</label>',
            '<div class="col-sm-10" style="margin-left: -25px;"></div>',
            '<div class="col-sm-1" style="margin-left: -25px;"><button type="button" id="selectAllBtn" class="btn btn-link  pull-right" style="margin-right: 30px;margin-top: -8px;">全选</button></div>',
            '</div>',
            '<div class="row" style="overflow-y: auto;width: 680px;max-height: 200px;margin-left: 5px;">',
            '                        <table class="table">',
            '                            <tbody>',
            dataNodeContent,
            '                            </tbody>',
            '                        </table>',
            '</div>',
            '                        <div class="form-group" style="margin-top: 15px;">',
            '                            <label for="description"',
            '                                   class="col-sm-1 control-label " style="min-width: 80px;">原因:</label>',
            '                            <div class="col-sm-11" style="margin-left: -25px;">',
            '                            <textarea type="text" class="form-control"',
            '                                      name="description" id="description"',
            '                                      placeholder="填写订阅申请原因"',
            '                                      data-error="<@s.message "validator.error.require"/>" required',
            '                            ></textarea>',
            '                                <div class="help-block with-errors"></div>',
            '                            </div>',
            '                        </div>',
            '                        <button type="button" id="applyBtn" class="btn btn-primary pull-right" style="width: 90px;margin-right: 40px;margin-top: 20px;">确定</button>',
            '                    </div>'].join("");

        var content = ['<div style="overflow-y: hidden; overflow-x: hidden; max-height: 450px;width: 1000px;margin-left: 25px;">',
            '<div class="form-group" style="margin-top:20px;">',
            '<label for="description"',
            'class="col-sm-1 control-label " style="min-width: 90px;">数据节点:</label>',
            '<div class="col-sm-10" style="margin-left: -25px;"></div>',
            '<div class="col-sm-1" style="margin-left: -25px;"><button type="button" id="selectAllBtn" class="btn btn-link  pull-right" style="outline: none;margin-right: 30px;margin-top: -8px;">全选</button></div>',
            '</div>',
            '<div class="row" style="overflow-y: auto;width: 975px;max-height: 250px;">',
            '                        <table class="table">',
            '                            <tbody>',
            dataNodeContent,
            '                            </tbody>',
            '                        </table>',
            '</div>',
            '                        <div class="form-group" style="margin-top: 15px;">',
            '                            <label for="description"',
            '                                   class="col-sm-1 control-label ">原因:</label>',
            '                            <div class="col-sm-11" style="margin-left: -25px;">',
            '                            <textarea type="text" class="form-control"',
            '                                      name="description" id="description"',
            '                                      placeholder="填写订阅申请原因"',
            '                                      data-error="<@s.message "validator.error.require"/>" required',
            '                            ></textarea>',
            '                                <div class="help-block with-errors"></div>',
            '                            </div>',
            '                        </div>',
            '                        <button type="button" id="applyBtn" class="btn btn-primary pull-right" style="outline: none;width: 90px;margin-right: 40px;margin-top: 20px;">确定</button>',
            '                    </div>'].join("");

        $("#subscribeBtn").popover({
            content: contentMd
        }).on("click", function () {
            $('button.dataNode').click(function () {
                var state = $(this).attr("state");
                if (state == 'NOTAPPLY') {
                    var select = $(this).attr("_selected");
                    if ("true" == select) {
                        $(this).attr("_selected", "false");
                        $(this).css("background-color", "#c2c2c2");
                        $(this).css("color", "black");
                    } else {
                        $(this).attr("_selected", "true");
                        $(this).css("background-color", "#00C0EF");
                        $(this).css("color", "white");
                    }
                }
            });
            $('#selectAllBtn').click(function () {
                var allSelect = true;
                $('button.dataNode').each(function () {
                    if ($(this).attr("state") == 'NOTAPPLY' && 'false' == $(this).attr("_selected")) {
                        allSelect = 'false';
                        return false;
                    }
                });
                if (allSelect == 'false') {
                    $('button.dataNode').each(function () {
                        if ($(this).attr("state") == 'NOTAPPLY') {
                            $(this).attr("_selected", "true");
                            $(this).css("background-color", "#00C0EF");
                            $(this).css("color", "white");
                        }
                    });
                } else {
                    $('button.dataNode').each(function () {
                        if ($(this).attr("state") == 'NOTAPPLY') {
                            $(this).attr("_selected", "false");
                            $(this).css("background-color", "#c2c2c2");
                            $(this).css("color", "black");
                        }
                    });
                }
            });

            $('#applyBtn').click(function () {
                var nodeIds = new Array();
                $('button.dataNode').each(function () {
                    if ($(this).attr("state") == 'NOTAPPLY' && 'true' == $(this).attr("_selected")) {
                        nodeIds.push($(this).attr("value"));
                    }
                });

                $.ajax({
                    url: "/myApp/apply?dataNodeIds=" + nodeIds + "&appId=" + $("#appId").val(),
                    success: function () {
                        location.href = "/app/detail?id=" + $("#appId").val();
                    }
                })

            });
        });

        $("#subscribeBtnlg").popover({
            content: content
        }).on("click", function () {
            $('button.dataNode').click(function () {
                var state = $(this).attr("state");
                if (state == 'NOTAPPLY') {
                    var select = $(this).attr("_selected");
                    if ("true" == select) {
                        $(this).attr("_selected", "false");
                        $(this).css("background-color", "#c2c2c2");
                        $(this).css("color", "black");
                    } else {
                        $(this).attr("_selected", "true");
                        $(this).css("background-color", "#00C0EF");
                        $(this).css("color", "white");
                    }
                }
            });
            $('#selectAllBtn').click(function () {
                var allSelect = true;
                $('button.dataNode').each(function () {
                    if ($(this).attr("state") == 'NOTAPPLY' && 'false' == $(this).attr("_selected")) {
                        allSelect = 'false';
                        return false;
                    }
                });
                if (allSelect == 'false') {
                    $('button.dataNode').each(function () {
                        if ($(this).attr("state") == 'NOTAPPLY') {
                            $(this).attr("_selected", "true");
                            $(this).css("background-color", "#00C0EF");
                            $(this).css("color", "white");
                        }
                    });
                } else {
                    $('button.dataNode').each(function () {
                        if ($(this).attr("state") == 'NOTAPPLY') {
                            $(this).attr("_selected", "false");
                            $(this).css("background-color", "#c2c2c2");
                            $(this).css("color", "black");
                        }
                    });
                }
            });

            $('#applyBtn').click(function () {
                var nodeIds = new Array();
                $('button.dataNode').each(function () {
                    if ($(this).attr("state") == 'NOTAPPLY' && 'true' == $(this).attr("_selected")) {
                        nodeIds.push($(this).attr("value"));
                    }
                });

                $.ajax({
                    url: "/myApp/apply?dataNodeIds=" + nodeIds + "&appId=" + $("#appId").val(),
                    success: function () {
                        location.href = "/app/detail?id=" + $("#appId").val();
                    }
                })

            });
        });


        $('ul.users-list li').click(function () {
            location.href = "/app/detail?id=" + $(this).attr("appId");
        });


        $('a').hover(function () {
            $(this).css("cursor", "pointer");
        });

        String.prototype.endWith = function (str) {
            var reg = new RegExp(str + "$");
            return reg.test(this);
        };

        $('img.favorite').hover(function () {
            $(this).css("cursor", "pointer");
        });

        $('img.favorite').click(function () {
            $(this).css("cursor", "pointer");
            var appId = $("#appId").val();
            var favorite = $(this).attr("value");
            if (favorite == 'false') {
                $(this).attr("src", "/assets/img/demo/favorite.png");
                $(this).attr("title", "点击取消收藏");
                $("#favoriteTip").html("已收藏");
                $(this).attr("value", 'true');
            } else {
                $(this).attr("src", "/assets/img/demo/nonfavorite.png");
                $(this).attr("title", "点击收藏");
                $("#favoriteTip").html("收藏");
                $(this).attr("value", 'false');
            }
            $.ajax({
                url: "/myApp/favorite?appId=" + appId + "&favorite=" + favorite,
                type: "get",
                success: function (data) {
                }
            });
        });

        $('tr.sumary').hover(function () {
            $(this).css("cursor", "pointer");
            var id = $(this).attr("id");
            if ("sumary" == $(this).attr("class")) {
                $("#" + id + "_detail").css('display', '');
                $("#" + id + "_detail").css("background-color", "#eeeeee");
            }
            $(this).css("font-size", "18px");
            $(this).css("font-weight", "bold");
            $(this).css("background-color", "#eeeeee");
        }, function () {
            $(this).css("cursor", "pointer");
            var _id = $(this).attr("id");
            $("#" + _id + "_detail").css("display", "none");
            $(this).css("font-size", "16px");
            $(this).css("font-weight", "");
            $(this).css("background-color", "transparent");
        });

        $('tr.sumary').click(function () {
            location.href = "/app/detail?id=" + $(this).attr("appId");
        });

        $('.info-box').hover(function () {
            if ("appInfo" == $(this).attr("id")) {
                return;
            }
            $(this).css("background-color", "#c2c2c2");
            $(this).css("cursor", "pointer");
        }, function () {
            $(this).css("background-color", "transparent");
        });
        $('.nav').find('li').find("a").each(function () {
            $(this).hover(function () {
                $(this).css("cursor", "pointer");
                $(this).css("color", "white");
            }, function () {
                $(this).css("color", "white");
            });
        });
    });

</script>
</html>
</#escape>